define(['jquery', 'bootstrap', 'backend'], function ($, undefined, Backend) {

    var Controller = {
        index: function () {
            // 模拟PLC设备数据
            var plcDevices = [
                {name: 'PLC-001', ip: '192.168.1.100', status: '在线', cpu: '45%', memory: '62%', lastComm: '2024-01-15 14:30:25', todayComm: 128},
                {name: 'PLC-002', ip: '192.168.1.101', status: '离线', cpu: '0%', memory: '0%', lastComm: '2024-01-14 16:45:12', todayComm: 0},
                {name: 'PLC-003', ip: '192.168.1.102', status: '在线', cpu: '38%', memory: '55%', lastComm: '2024-01-15 14:28:33', todayComm: 95},
                {name: 'PLC-004', ip: '192.168.1.103', status: '在线', cpu: '52%', memory: '71%', lastComm: '2024-01-15 14:25:18', todayComm: 142},
                {name: 'PLC-005', ip: '192.168.1.104', status: '在线', cpu: '41%', memory: '58%', lastComm: '2024-01-15 14:32:47', todayComm: 87},
                {name: 'PLC-006', ip: '192.168.1.105', status: '在线', cpu: '29%', memory: '43%', lastComm: '2024-01-15 14:29:55', todayComm: 76},
                {name: 'PLC-007', ip: '192.168.1.106', status: '离线', cpu: '0%', memory: '0%', lastComm: '2024-01-14 18:20:33', todayComm: 0},
                {name: 'PLC-008', ip: '192.168.1.107', status: '在线', cpu: '48%', memory: '66%', lastComm: '2024-01-15 14:31:12', todayComm: 113}
            ];

            // 初始化页面数据
            function initPageData() {
                // 更新统计卡片
                updateStatistics();

                // 渲染详细数据表格
                renderDetailTable();

                // 渲染图表
                renderCharts();
            }

            // 更新统计数据
            function updateStatistics() {
                var onlineCount = plcDevices.filter(device => device.status === '在线').length;
                var offlineCount = plcDevices.filter(device => device.status === '离线').length;

                $('#total-plc').text(plcDevices.length);
                $('#online-plc').text(onlineCount);
                $('#offline-plc').text(offlineCount);
                $('#last-update').text(new Date().toLocaleString());
            }

            // 渲染详细数据表格
            function renderDetailTable() {
                var tbody = $('#plc-detail-body');
                tbody.empty();

                plcDevices.forEach(function(device) {
                    var statusClass = device.status === '在线' ? 'label-success' : 'label-danger';
                    var cpuClass = device.cpu !== '0%' ? '' : 'text-muted';
                    var memoryClass = device.memory !== '0%' ? '' : 'text-muted';

                    var row = `
                        <tr>
                            <td><strong>${device.name}</strong></td>
                            <td>${device.ip}</td>
                            <td><span class="label ${statusClass}">${device.status}</span></td>
                            <td class="${cpuClass}">${device.cpu}</td>
                            <td class="${memoryClass}">${device.memory}</td>
                            <td>${device.lastComm}</td>
                            <td>${device.todayComm}</td>
                        </tr>
                    `;
                    tbody.append(row);
                });
            }

            // 渲染图表
            function renderCharts() {
                // PLC状态分布饼图
                renderStatusChart();

                // 通信质量趋势图
                renderTrendChart();
            }

            // 渲染状态分布饼图
            function renderStatusChart() {
                var onlineCount = plcDevices.filter(device => device.status === '在线').length;
                var offlineCount = plcDevices.filter(device => device.status === '离线').length;

                var chartHtml = `
                    <div class="text-center">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="pie-chart" style="width: 200px; height: 200px; margin: 0 auto; border-radius: 50%; background: conic-gradient(
                                    #00a65a 0% ${(onlineCount / plcDevices.length) * 100}%,
                                    #dd4b39 ${(onlineCount / plcDevices.length) * 100}% 100%
                                );"></div>
                            </div>
                            <div class="col-md-6">
                                <div style="margin-top: 50px;">
                                    <p><span class="label label-success" style="display: inline-block; width: 20px; height: 20px;"></span> 在线设备: ${onlineCount}</p>
                                    <p><span class="label label-danger" style="display: inline-block; width: 20px; height: 20px;"></span> 离线设备: ${offlineCount}</p>
                                    <p><span class="label label-primary" style="display: inline-block; width: 20px; height: 20px;"></span> 总计: ${plcDevices.length}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                `;

                $('#plc-status-chart').html(chartHtml);
            }

            // 渲染通信质量趋势图
            function renderTrendChart() {
                // 模拟过去7天的通信质量数据
                var days = ['1月8日', '1月9日', '1月10日', '1月11日', '1月12日', '1月13日', '1月14日'];
                var successRates = [98, 96, 97, 95, 99, 94, 92];

                var chartHtml = `
                    <div style="height: 250px; position: relative;">
                        <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
                            <div style="display: flex; height: 100%; align-items: flex-end; justify-content: space-around;">
                                ${successRates.map((rate, index) =>
                                    `<div style="text-align: center; width: 12%;">
                                        <div style="background: #00a65a; height: ${rate * 2}px; margin-bottom: 5px; border-radius: 3px; position: relative;">
                                            <div style="position: absolute; top: -25px; left: 50%; transform: translateX(-50%); color: #333; font-size: 12px;">${rate}%</div>
                                        </div>
                                        <div style="font-size: 12px; color: #666;">${days[index]}</div>
                                    </div>`
                                ).join('')}
                            </div>
                        </div>
                        <div style="position: absolute; top: 10px; left: 10px; font-size: 14px; color: #666;">
                            通信成功率趋势
                        </div>
                    </div>
                `;

                $('#communication-trend-chart').html(chartHtml);
            }

            // 按钮事件绑定
            $('.btn-refresh-data').on('click', function() {
                Toastr.info('正在刷新数据...');

                // 模拟数据更新
                setTimeout(function() {
                    // 随机更新一些设备状态
                    plcDevices.forEach(function(device) {
                        if (Math.random() > 0.8) {
                            device.status = device.status === '在线' ? '离线' : '在线';
                            device.cpu = device.status === '在线' ? (Math.floor(Math.random() * 60) + 20) + '%' : '0%';
                            device.memory = device.status === '在线' ? (Math.floor(Math.random() * 50) + 30) + '%' : '0%';
                            if (device.status === '在线') {
                                device.lastComm = new Date().toLocaleString();
                                device.todayComm += Math.floor(Math.random() * 10);
                            }
                        }
                    });

                    initPageData();
                    Toastr.success('数据刷新完成');
                }, 1000);
            });

            $('.btn-export-report').on('click', function() {
                Toastr.info('正在生成报告...');
                setTimeout(function() {
                    Toastr.success('报告已生成，请查看下载文件夹');
                }, 1500);
            });

            $('.btn-real-time-monitor').on('click', function() {
                Toastr.info('正在打开实时监控页面...');
                setTimeout(function() {
                    window.open('/plc/monitor?ref=addtabs', '_blank');
                }, 500);
            });

            // 页面加载完成后初始化数据
            setTimeout(function() {
                initPageData();
            }, 500);
        }
    };
    return Controller;
});